<template>
  <div class="game" :style="{background:'url(/images/other/' + backgroundPicture + ') left'}">
    <div class="img">
      <img :src="picture" alt="">
    </div>
    <div class="footer">
      <!--   菜单按钮   -->
      <div class="menu-demo">
        <a-menu mode="horizontal" theme="dark" :default-selected-keys="['1']">
          <a-menu-item key="1">Log</a-menu-item>
          <a-menu-item key="2">Load</a-menu-item>
          <a-menu-item key="3" @click="save">Save</a-menu-item>
          <a-menu-item key="4" @click="system">System</a-menu-item>
          <a-menu-item key="6" @click="nextContent" style="float: right">next</a-menu-item>
          <a-menu-item key="5" @click="paused" style="float: right">paused</a-menu-item>
        </a-menu>
      </div>
      <a-typography>
        <a-typography-paragraph style="font-size: 25px">
          <router-view></router-view>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ text }}
        </a-typography-paragraph>
      </a-typography>
      <audio ref="bgm" autoplay="autoplay" preload="auto" :src="music" @ended="musicOver"></audio>
    </div>
  </div>
</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";
import {chapterElement} from "../../Content/chapter"

const router = useRouter();
//临时存储章节内容
let chapterElementContent = [];
//下标定位
let contentIndex = 0;
//文本内容
const text = ref('');
//音频
const music = ref('');
//人物图片
const picture = ref('');
//画布背景图
const backgroundPicture = ref('');
//章节下标
let chapterIndex = 0;
//读取进度
readProgress()
function readProgress() {
  let urlParams = getUrlParams();
  if (urlParams !== undefined) {
    //章节下标
    chapterIndex = urlParams.chapter;
    chapterElementContent = chapterElement[chapterIndex - 1];
    //章节内容下标
    contentIndex = urlParams.index;
    text.value = chapterElementContent[contentIndex].text;
    getMusic();
    getPicture();
    getBackgroundPicture();
  }
}

//获取地址栏的query参数
function getUrlParams() {
  let splitElement = window.location.href.split('#')[1];
  let strings = splitElement.split('/chapter?');
  //可能没有参数
  if (strings.length > 1) {
    let paramArr = strings[1].split('&');
    let params = {};
    //遍历数组，拿到json对象
    for (let i = 0; i < paramArr.length; i++) {
      params[paramArr[i].split('=')[0]] = paramArr[i].split('=')[1]
    }
    return params;
  }
}

function getMusic() {
  const music1 = chapterElementContent[contentIndex].music;
  if (music1 !== undefined) {
    music.value = music1;
  }
}

function getPicture() {
  const picture1 = chapterElementContent[contentIndex].picture;
  if (picture1 !== undefined) {
    picture.value = picture1;
  }
}

function getBackgroundPicture() {
  const background = chapterElementContent[contentIndex].background;
  if (background !== undefined) {
    backgroundPicture.value = background;
  } else {
    //默认显示当前章节第一个背景图
    backgroundPicture.value = chapterElementContent[0].background;;
  }
}
//system按钮事件
function system() {
  router.push({path: '/'})
}
//存档
function save() {
  //http://127.0.0.1:5173/#/game
  alert(window.location + '?index=' + contentIndex)
}

//下一句
function nextContent() {
  //下标+1
  contentIndex++;
  if (contentIndex >= chapterElementContent.length) {
    //再见  替换浏览器query参数后重新初始化章节内容数据
    replaceParamVal('chapter',parseInt(chapterIndex) + 1);
    replaceParamVal('index',0);
    readProgress();
  } else {
    text.value = chapterElementContent[contentIndex].text;
    getMusic();
    getPicture();
    getBackgroundPicture()
  }
}

function replaceParamVal(oldName,newWith) {

  var oUrl = window.location.href.toString();

  var re=eval('/('+ oldName+'=)([^&]*)/gi');

  var nUrl = oUrl.replace(re,oldName+'='+newWith);

  window.location.href=nUrl

}

//监听播放完成自动播放
function musicOver() {
  nextContent();
}

const bgm = ref(null);
//暂停播放语音
function paused() {
  if (bgm.value.paused) {
    bgm.value.play();
  } else {
    bgm.value.pause();
  }
}

</script>

<style scoped>
.img {
  position: relative;
  text-align: center;
  top: 10%;
}
:deep(.arco-menu-item ) {
  float: left;
  font-size: 20px;
}

:deep(.arco-menu-inner) {
}

:deep(.arco-typography) {
  color: #ffffff;

}

.footer {
  background-color: rgba(90, 60, 60, 0.3);;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
}

/* 画布 */
.game {
  background-size: 100% !important;
  text-align: center;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
</style>